<template>
  <div>
    <svg
      width="200"
      height="200"
      viewBox="0 0 200 200"
      class="icon"
      preserveAspectRatio="xMidYMid meet"
    >
      <defs>
        <g id='more'>
          <line x1='40' y1='25' x2='90' y2='25' stroke-width='8' stroke='currentColor'></line>
          <line x1='40' y1='50' x2='80' y2='50' stroke-width='8' stroke='currentColor'></line>
          <line x1='40' y1='75' x2='90' y2='75' stroke-width='8' stroke='currentColor'></line>
          <circle r='5' cx='20' cy='25' fill='currentColor'></circle>
          <circle r='5' cx='20' cy='50' fill='currentColor'></circle>
          <circle r='5' cx='20' cy='75' fill='currentColor'></circle>
        </g>
        <symbol id='more1' viewBox='0 0 100 100'>
          <line x1='40' y1='25' x2='90' y2='25' stroke-width='8' stroke='currentColor'></line>
          <line x1='40' y1='50' x2='80' y2='50' stroke-width='8' stroke='currentColor'></line>
          <line x1='40' y1='75' x2='90' y2='75' stroke-width='8' stroke='currentColor'></line>
          <circle r='5' cx='20' cy='25' fill='currentColor'></circle>
          <circle r='5' cx='20' cy='50' fill='currentColor'></circle>
          <circle r='5' cx='20' cy='75' fill='currentColor'></circle>
        </symbol>
        <symbol id='filledArrowRight' viewBox='0 0 100 100'>
          <polyline points='20 10, 80 50, 20 90' fill='currentColor'></polyline>
        </symbol>
        <symbol id='arrowRight' viewBox='0 0 100 100'>
          <polyline points='20 10, 60 50, 20 90' fill='transparent' stroke-width='8' stroke='currentColor'></polyline>
        </symbol>
        <symbol id='animateSVG' viewBox='0 0 100 100'>
          <rect 
            x='0' 
            y='0' 
            transform='translate(20, 20) rotate(20) skewY(30) scale(0.3)'
            width='50' 
            height='50' 
            fill='currentColor'></rect>
        </symbol>
        <symbol id='circleAround' viewBox='0 0 100 100'>
          <!-- 圆环 -->
          <circle 
            cx='50' 
            cy='50' 
            r='45' 
            stroke-width='5' 
            stroke='#fff' 
            fill='transparent'></circle>
          <circle
            class="SVG_circle"
            translate="matrix(0 -1 1 0 0 440)"
            cx='50'
            cy='50'
            r='45'
            stroke-width='5'
            stroke='green'
            fill='transparent'></circle>
        </symbol>
        <linearGradient id='linearGradient'>
          <stop offset='0' stop-color='red'></stop>
          <stop offset='50%' stop-color='green' stop-opacity='0.5'></stop>
          <stop offset='100%' stop-color='blue'></stop>
        </linearGradient>
        <radialGradient r='50%' cx='50%' cy='50%' fx='50%' fy='50%' id='radialGradient'>
          <stop offset='0' stop-color='red'></stop>
          <stop offset='50%' stop-color='green' stop-opacity='0.5'></stop>
          <stop offset='100%' stop-color='blue'></stop>
        </radialGradient>
        <symbol id='linearGradientBox' viewBox='0 0 100 100'>
          <rect x='0' y='0' height='100' width='100' fill='url(#radialGradient)'></rect>
        </symbol>
        <symbol id='loading' viewBox='0 0 200 200' fill='none'>
          <circle cx='100' cy='100' stroke='red' stroke-width='10' r='90' stroke-dasharray='142' stroke-linecap='round'>
            <animateTransform attributeName='transform' type='rotate' from='0 100 100' to='360 100 100' dur='3s' repeatCount='indefinite'></animateTransform>
            <animate attributeName='stroke' values='red;blue;red' dur='6s' repeatCount='indefinite'></animate>
          </circle>
          <circle cx='100' cy='100' stroke='blue' stroke-width='10' r='60' stroke-dasharray='94' stroke-linecap='round'>
            <animateTransform attributeName='transform' type='rotate' values='360 100 100;0 100 100' dur='3s' repeatCount='indefinite'></animateTransform>
            <animate attributeName='stroke' values='blue;red;blue' dur='6s' repeatCount='indefinite'></animate>
          </circle>
        </symbol>
      </defs>

      <g viewBox='0 0 100 100'>
        <circle 
          cx='50' 
          cy='50' 
          r='45' 
          stroke-width='5' 
          stroke='#fff' 
          fill='transparent'></circle>
        <circle
          class="SVG_circle"
          cx='50'
          cy='50'
          r='45'
          stroke-width='5'
          stroke='green'
          fill='transparent'></circle>
      </g>
      <!-- 描边 -->
      <!-- <g viewBox='0 0 100 100'> 
        <line y1='45' x1='10' x2='90' y2='45' class='logo' stroke='red' stroke-width='10'></line>
      </g>
      <svg viewBox='-50 0 100 100'>
        <rect x='0' y='0' height='50' width='50' fill='red'>
          <set attributeName='x' attributeType='XML' to='20' begin='1s' />
          <set attributeName='x' attributeType='XML' to='20' begin='2s' />
          <set attributeName='fill' attributeType='XML' to='blue' begin='3s' />
        </rect>
      </svg>
      <svg viewBox='-50 -50 100 100'>
        <circle cx='0' cy='0' r='24' stroke='red' stroke-width='1' fill='blue'>
          <animate attributeName='cx' attributeType='XML' from='0' to='25' repeatCount='2' dur='2s' fill='freeze'></animate>
          <animate attributeName='cy' attributeType='XML' from='0' to='25' repeatCount='1' dur='2s' fill='freeze'></animate>
          <animateTransform attributeName='transform' attributeType='XML' begin='0' from='1' to='2' dur='3s' type='scale' repeatCount='2'></animateTransform>
        </circle>
      </svg> -->
      <svg viewBox='0 -50 100 100'>
        <rect x='0' y='0' height='10' width='10' fill='red'>
          <animateMotion id='forword' begin='0' dur='5s' rotate='0' fill='freeze' path='M10 10 L10 30 L30 30 L30 10 Z'></animateMotion>
          <animateMotion id='back' begin='forword.end + 0.5s' dur='5s' rotate='0' fill='freeze' path='M30 10 L30 30 L10 30 L10 10 Z'></animateMotion>
        </rect>
        <!--  -->
        <path d='M10 10 L10 30 L30 30 L30 10 Z' fill='none' stroke='green'></path>
      </svg>
    </svg>
    <div :style="{color: 'green'}">
      <!-- <svg width='100' height='100' viewBox='0 0 100 100'>
        <use href='#more'></use>
      </svg> -->
      <!-- <Icon :style="{width: 100, height: 100, color: 'red'}" :svgId="'more1'" />
      <Icon :style="{width: 100, height: 100, color: 'pink'}" :svgId="'animateSVG'" />
      <Icon :style="{width: 100, height: 100, color: 'blue'}" :svgId="'arrowRight'" />
      <Icon :style="{width: 100, height: 100, color: 'yellow'}" :svgId="'filledArrowRight'" />
      <Icon :style="{width: 100, height: 100, color: 'yellow'}" svgId='loading' />
      <Icon :style="{width: 100, height: 100, color: 'yellow'}" svgId='linearGradientBox' /> -->
    </div>
    <div>
      <!-- <Icon :style="{width: 250, height: 250}" :svgId="'circleAround'" /> -->
      <Icon :style="{width: 400, height: 400, color: 'yellow'}" svgId='loading' />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "vue";
import Icon from '@src/components/icon.vue'

export default defineComponent({
  name: "SVG",
  components: {
    Icon
  },
  setup: () => {
    onMounted(() => {
      setTimeout(() => {
        const SVGstrokeLength: any = document.getElementsByClassName('logo')[0]
        console.log(SVGstrokeLength.getTotalLength()) // 获取svg的path画图长度
      }, 1000)
    })
    return {

    };
  }
});
</script>

<style scoped>
.icon{
  /* visibility: hidden; */
  /* position: absolute; */
  z-index: -1;
}
@keyframes circle {
  from {
    stroke-dasharray: 0 283;/*svgz中的线段间隔*/
  }
  to {
    stroke-dasharray: 283 283;
  }
}
.SVG_circle{
  animation: circle 5s linear infinite;
}
.logo{
  stroke-dashoffset: 90;
  stroke-dasharray: 90;
  transition: stroke-dashoffset 1.5s ease-out;
}
.icon:hover .logo{
  stroke-dashoffset: 0;
}
</style>